<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> New Document </title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="Content-Language" content="zh-CN" />
	<meta name="Design Corp" content="www.mysuc.com" />
	<meta name="Designer" content="hayden" />
	<meta name="Designer mail" content="QQ:3996992" />
	<meta name="robots" content="hayden" />
	<meta name="Keywords" content="" />
	<meta name="Description" content="" />
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<style>
#fanShaped {
			background: none repeat scroll 0 0 red;
			-webkit-border-radius: 50px 0 0 0;
			-moz-border-radius: 50px 0 0 0;
			border-radius: 50px 0 0 0;
			height: 50px;
			width: 50px;
		}
img{
      -webkit-transform: rotate(-90deg);
      -moz-transform: rotate(-90deg);
      -o-transform: rotate(-90deg);
      filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

</style>
</head>
<body>
<div id="fanShaped"></div>
<img src="image/yao.png"/>
<SCRIPT LANGUAGE="JavaScript">
<!--
-->
</SCRIPT>
<style type="text/css">
*{margin:0;padding:0px;}
body{background:#b1b1b1;font-family:Arial;font-size:125%;color:#202020;}
li{position:relative;list-style:none;float:left;width:235px;height:220px;margin:10px 0 0 10px;cursor:pointer;}
#container {position: relative; height:362px; width: 282px; margin: 0 auto;top:50px;
    -webkit-perspective: 800px;/*3d场景*/
    -moz-perspective: 800px;
}
#container div {position:absolute; left:0; top:0; width:242px; height: 322px; padding:20px; background:#463;
    -ms-border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;

    -webkit-transition: 1.5s ease-in-out;
    -moz-transition: 1.5s ease-in-out;
    -ms-transition: 1.5s ease-in-out;
    -o-transition: 1.5s ease-in-out;
    transition: 1.5s ease-in-out;
}
#container div.lower {font-family: verdana, arial, sans-serif; background:#642;
    background: -moz-linear-gradient(-45deg, #642, #864 50%, #642 100%);  
    background: -webkit-gradient(linear, 0 0, 100% 100%, from(#642), color-stop(50%, #a86), color-stop(100%, #642));
    -moz-transform-style: preserve-3d;
    -moz-backface-visibility: hidden;/*抖动*/
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
}
#container div.lower h1 {font-size:20px; padding:0; margin:0; color:#fff; line-height:40px;}
#container div.lower p {font-size:11px; padding:0; margin:0; color:#eee; line-height:20px;}
#container div.lower a {color:#ff0;}

#container div.upper {
    -moz-transform-style: preserve-3d;
    -moz-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    background: -moz-linear-gradient(-45deg, #463, #8a7 50%, #463 100%);  
    background: -webkit-gradient(linear, 0 0, 100% 100%, from(#463), color-stop(50%, #8a7), color-stop(100%, #463)); 
}
#container div.upper img {border:1px solid #fff;width:242px;}


#container:hover div.lower {    -moz-transform: rotateY(0);
    -webkit-transform: rotateY(0);
}
#container:hover div.upper {
    -webkit-transform: rotateY(9deg);
    -moz-transform: rotateY(9deg);
}
</style>
<div id="container">
    <div class="lower">
        <h1>The Barn Owl</h1>
        <p>(Tyto alba) is the most widely distributed species of owl, and one of the most widespread of all birds. It is also referred to as Common Barn Owl, to distinguish it from other species in the barn-owl family Tytonidae. These form one of two main lineages of living owls, the other being the typical owls (Strigidae). T. alba is found almost anywhere in the world except polar and desert regions, Asia north of the Alpide belt, most of Indonesia, and the Pacific islands.</p>
        <p>Source <a href="http://www.css3train.com/">Wikipedia</a></p>
    </div>
    <div class="upper">
        <img src="http://www.css3train.com/images/owl.jpg" alt="Barn owl">
    </div>
</div>
</body>
</html>